<script lang="ts" setup>
	import {computed, ref} from 'vue';
	import useSparePartApplyListService from './services/useSparePartApplyListService';
	import {onLoad} from '@dcloudio/uni-app';
	import { SparePartApplyListItem } from './types'

	const {
		total,
		sparePartApplyList,
		getSparePartApplyListParam,
		getSparePartApplyList,
	} = useSparePartApplyListService();

	const pageStyle = computed(() => {
		const systemInfo = uni.getSystemInfoSync();
		return {
			height: `${systemInfo.windowHeight - systemInfo.safeAreaInsets.bottom}px`,
			width: `${systemInfo.windowWidth}px`,
		};
	});
	
	const refreshState = ref(false)

	const getList = async (isAppend = true) => {
		uni.showLoading({
			mask: true,
			title: '加载中',
		});
		getSparePartApplyListParam.value.page = 1
		getSparePartApplyListParam.value.limit = 10
		await getSparePartApplyList(isAppend);
		uni.hideLoading();
	};

	const onCreateSparePartApply = () => {
		uni.navigateTo({
			url: '/pages_network/home/parts/selectParts',
		});
	};
	
	const hadnleScrollToLower = async (data) => {
		if (data.detail.direction === 'bottom') {
			const {page, limit} = getSparePartApplyListParam.value;
			console.log(total.value);
			if (page * limit < total.value) {
				getSparePartApplyListParam.value.page += 1;
				await getSparePartApplyList();
			}
		}
	};
	
	const handleReFresherRefresh = async (data) => {
		refreshState.value = true;
		getSparePartApplyListParam.value.page = 1;
		await getSparePartApplyList(false);
		refreshState.value = false;
	};
	
	const handleSparePartApplyItemClick = (data: SparePartApplyListItem) => {
		if ([1, 4].includes(data.status)) {
			uni.navigateTo({
				url: `/pages_network/home/parts/addParts?id=${data.id}`
			})
		} else {
			uni.navigateTo({
				url: `/pages_network/home/parts/partsDetail?id=${data.id}`
			})
		}
	}
	
	const handleOrderNoCopyClick = (content: string) => {
		uni.setClipboardData({
			data: content,
			success() {
				uni.showToast({
					title: '已复制',
					icon: 'success',
				});
			},
		});
	}

	const init = async () => {
		await getList();
	};

	onLoad(() => {
		init();
	});
</script>

<template>
	<view class="spare-part-apply-list-page" :style="pageStyle">
		<view class="search-box">
			<view class="search">
				<uni-icons type="search" size="20" color="#999999"></uni-icons>
				<input
					class="uni-input"
					confirm-type="search"
					placeholder="输入单号搜索"
					v-model.trim="getSparePartApplyListParam.code"
					@confirm="getList(false)"
				/>
				<view class="btn" @click="getList(false)">搜索</view>
			</view>
		</view>

		<scroll-view
			class="spare-part-apply-list"
			scroll-y="true"
			@scrolltolower="hadnleScrollToLower"
			:refresher-enabled="true"
			:refresher-triggered="refreshState"
			@refresherrefresh="handleReFresherRefresh"
		>
			<view
				class="spare-part-apply-item"
				v-for="(
					sparePartApplyItem, sparePartApplyItemIndex
				) in sparePartApplyList"
				:key="sparePartApplyItemIndex"
				@click="handleSparePartApplyItemClick(sparePartApplyItem)"
			>
				<view class="info">
					<view class="content">
						<view class="info-item">
							<view class="label">单据编号:</view>
							<view class="value">{{ sparePartApplyItem.code }}</view>
							<image
								@click.stop="handleOrderNoCopyClick(sparePartApplyItem.code)"
								style="width: 30rpx; height: 30rpx"
								src="/static/copy.svg"
								mode="aspectFit"
							></image>
						</view>
						<view class="info-item">
							<view class="label">单据类型:</view>
							<view class="value">
								<template v-if="sparePartApplyItem.type === 1">收费销售订单</template>
								<template v-if="sparePartApplyItem.type === 2">免费销售订单</template>
								<template v-if="sparePartApplyItem.type === 3">免费销售订单(完全赠送)</template>
							</view>
						</view>
						<view class="info-item">
							<view class="label">收货人员:</view>
							<view class="value">{{ sparePartApplyItem.contactName }}</view>
						</view>
						<view class="info-item">
							<view class="label">联系手机:</view>
							<view class="value">{{ sparePartApplyItem.contactPhone }}</view>
						</view>
						<view class="info-item">
							<view class="label">收货地址:</view>
							<view class="value">
								<text>{{ sparePartApplyItem.province }}</text>
								<text>{{ sparePartApplyItem.city }}</text>
								<text>{{ sparePartApplyItem.area }}</text>
								<text>{{ sparePartApplyItem.town }}</text>
								<text>{{ sparePartApplyItem.detailAddress }}</text>
							</view>
						</view>
						<view class="info-item">
							<view class="label">申请人员:</view>
							<view class="value">
								{{ sparePartApplyItem.creator }}
							</view>
						</view>
					</view>
					<view class="status">
						<view class="status-primary" v-if="sparePartApplyItem.status === 1">
							待提交
						</view>
						<view class="status-warning" v-if="sparePartApplyItem.status === 2">
							待审核
						</view>
						<view class="status-warning" v-if="sparePartApplyItem.status === 3">
							待过账
						</view>
						<view class="status-error" v-if="sparePartApplyItem.status === 4">
							审核驳回
						</view>
						<view class="status-primary" v-if="sparePartApplyItem.status === 5">
							已过账
						</view>
						<view class="status-warning" v-if="sparePartApplyItem.status === 6">
							待审批
						</view>
					</view>
				</view>
				<view class="create-time">
					<image
						class="list-item_footer_img"
						src="@/static/network/order/time.svg"
						mode="aspectFit"
					></image>
					创建时间：{{ sparePartApplyItem.createTime }}
				</view>
			</view>
		</scroll-view>

		<view class="footer">
			<view class="create-btn" @click="onCreateSparePartApply">配件申请</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.spare-part-apply-list-page {
		display: flex;
		flex-direction: column;

		.search-box {
			box-sizing: border-box;
			padding: 24rpx;
			width: 100%;

			.search {
				display: flex;
				height: 64rpx;
				font-size: 24rpx;
				background-color: #fff;
				box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
				border-radius: 64rpx;
				align-items: center;
				justify-content: space-between;
				padding: 0 24rpx 0 16rpx;
				column-gap: 12rpx;

				.uni-input {
					flex: 1;
					width: 0;
					font-size: 24rpx;
				}

				.btn {
					color: #007cff;
					font-weight: bold;
					line-height: 28rpx;
				}
			}
		}

		.spare-part-apply-list {
			width: 100%;
			height: 0;
			flex: 1;
			padding: 0 24rpx;
			box-sizing: border-box;

			.spare-part-apply-item {
				font-size: 24rpx;
				background-color: #fff;
				padding: 12rpx;
				box-sizing: border-box;
				margin-bottom: 24rpx;
				border: 2rpx solid rgba(0, 0, 0, 0.1);
				border-radius: 8rpx;

				.info {
					display: flex;
					justify-content: space-between;

					.content {
						display: flex;
						flex-direction: column;
						row-gap: 8rpx;

						.info-item {
							display: flex;
							column-gap: 8rpx;

							.label {
								color: #606266;
							}
						}
					}

					.status {
						.status-primary {
							padding: 4rpx 8rpx;
							background-color: #007cff;
							font-size: 20rpx;
							color: #fff;
							border-radius: 8rpx;
						}

						.status-error {
							padding: 4rpx 8rpx;
							background-color: #f56c6c;
							font-size: 20rpx;
							color: #fff;
							border-radius: 8rpx;
						}

						.status-success {
							padding: 4rpx 8rpx;
							background-color: #00c0c0;
							font-size: 20rpx;
							color: #fff;
							border-radius: 8rpx;
						}

						.status-warning {
							padding: 4rpx 8rpx;
							background-color: #e69103;
							font-size: 20rpx;
							color: #fff;
							border-radius: 8rpx;
						}
					}
				}

				.create-time {
					display: flex;
					align-items: center;
					column-gap: 8rpx;
					box-sizing: border-box;
					padding: 12rpx 8rpx;
					background-color: #f6f7f8;
					margin-top: 8rpx;

					.list-item_footer_img {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
		}

		.footer {
			width: 100%;
			background-color: #fff;
			box-sizing: border-box;
			padding: 24rpx;
			margin-top: 24rpx;

			.create-btn {
				width: 100%;
				height: 72rpx;
				background-color: #007cff;
				border-radius: 72rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #fff;
			}
		}
	}
</style>
